import React, {memo, useEffect, useState} from 'react';
import CreateMusicCollectStyle from "./IndexStyle";
import {Button, Col, Form, Input, message, Row, Select, Table, Upload} from "antd";
import {PlusOutlined} from "@ant-design/icons";
import {useNavigate} from "react-router-dom";
import {insertMusicAPI} from "../../../../services/music";
import {MusicCollect} from "../../../../interface/MusicCollectInterface";
import {DictData} from "../../../../interface/SysDictDataInterface";
import {getSysDictData} from "../../../../services/sysDictData";
import {getMusicCollectDetailsListById, insertMusicCollectApi} from "../../../../services/musicCollect";
import {getHourMineSecondBySecond} from "../../../../utils/timeFormatting";
import Column from "antd/es/table/Column";
import UnitBox from "../../../../components/part/unitBox/UnitBox";

type Props = {};

export default memo(function CreateMusicCollect(props: Props) {
  const {TextArea} = Input;
  const [messageApi,contextHolder]=message.useMessage();
  const navigator=useNavigate();
  /** 歌单标签列表，即字典 */
  const [musicCollectTypeList,setMusicCollectTypeList]=useState<DictData[]>([]);

  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList[0].response?.data;
  };

  /** 页面首次加载 */
  useEffect(()=>{
    getSysDictData({dictType:"music_collect_style"}).then((result:any)=>{
      setMusicCollectTypeList(result.data.data.data);
      console.log(result);
    },(error)=>{
      console.log(error);
    });
  },[]);


  const onFinish = (values: MusicCollect) => {
    console.log('Success:', values);
    console.log(values);
    const nickname=localStorage.getItem("yf_gaduation_zzmusic_user_nickname") as string;
    const userId=parseInt(localStorage.getItem("yf_gaduation_zzmusic_user_id") as string);
    values.createUserId=userId;
    values.createUserNickname=nickname;
    /** 调用新增歌单接口 */
    insertMusicCollectApi(values).then((result:any)=>{
      console.log(result);
      if (result.data.code===200){
        messageApi.open({
          type:"success",
          content:"新增歌单成功",
          duration:1
        }).then(()=>{
          navigator("/creatorcenter");
        });
      }
    },(error)=>{
      console.log(error);
    });
  };

  return (
    <CreateMusicCollectStyle>
      {contextHolder}
      <UnitBox title={"创建歌单"} isShowLine={true} >
        <Form
          labelCol={{span: 4}}
          wrapperCol={{span: 14}}
          layout="horizontal"
          className="create_music_form"
          size={"large"}
          onFinish={onFinish}
        >
          <Row gutter={20}>
            <Col className="gutter-row" span={12}>
              <Form.Item<MusicCollect>
                label="歌单名称"
                name="name"
                rules={[{ required: true, message: '请输入歌单名称' }]}
              >
                <Input/>
              </Form.Item>
            </Col>
            <Col className="gutter-row" span={12}>
              <Form.Item<MusicCollect> name="type" label="歌单标签">
                <Select>
                  {
                    musicCollectTypeList.map((item,index)=>{
                      return (<Select.Option value={item.sysDictDataId}>{item.dictLabel}</Select.Option>);
                    })
                  }
                </Select>
              </Form.Item>
            </Col>
          </Row>


          <Row gutter={20}>
            <Col className="gutter-row" span={12}>
              <Form.Item<MusicCollect> name="cover" label="歌曲封面" getValueFromEvent={normFile}>
                <Upload action={`${process.env.REACT_APP_BASE_URL}/upload/file`} maxCount={1} listType="picture-card">
                  <button style={{border: 0, background: 'none'}} type="button">
                    <PlusOutlined/>
                    <div style={{marginTop: 8}}>上传歌单封面</div>
                  </button>
                </Upload>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={20}>
            <Col className="gutter-row" span={12}>
              <Form.Item<MusicCollect> name="introduction" label="歌单介绍">
                <TextArea ></TextArea>
              </Form.Item>
            </Col>
          </Row>

          <div className="music_form_btn_box">
            <Form.Item<MusicCollect> className="create_music_btn">
              <Button size={"large"} type="primary" htmlType="submit">
                创建歌单
              </Button>
            </Form.Item>
            <Form.Item<MusicCollect> className="create_music_btn">
              <Button onClick={()=>{navigator("/creatorcenter")}} size={"large"}>返回</Button>
            </Form.Item>
          </div>
        </Form>
      </UnitBox>




    </CreateMusicCollectStyle>
  );
});
